<div class="card-deck w-100 mb-3" id="stats_spam">
  <div class="card">
    <div class="card-body">
      <a class="card-title text-secondary h5 font-weight-bold" href="/spam2/filter/unmoderated/30"> <i class="fa fa-circle text-primary"></i>  Unmoderated</a>
      <ul class="list-group list-group-flush text-secondary  mt-3">
        <li class="list-group-item"><span title="Unmoderated Nodes"><%= Node.where(status: 4).size%> nodes</span></li>
        <li class="list-group-item"><span title="Unmoderated Comments"><%= Comment.where(status: 4).size %> comments</span></li>
      </ul>
    </div>
  </div>
  <div class="card">
   <div class="card-body">
      <a class="card-title h5 text-secondary font-weight-bold" href="/spam2/filter/spammed/30"> <i class="fa fa-ban text-danger"></i>  Spammed</a>
      <ul class="list-group list-group-flush text-secondary mt-3">
	<li class="list-group-item"><span title="Spammed Nodes"><%= Node.where(status: 0).size%> nodes</span></li>
   	<li class="list-group-item"><span title="Spammed Comments"><%= Comment.where(status: 0).size %> comments</span></li>      
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <a class="card-title h5 text-secondary font-weight-bold" href="/spam2/flags/filter/all/30"> <i class="fa fa-flag text-warning"></i>  Flagged</a>
      <ul class="list-group list-group-flush text-secondary mt-3">
        <li class="list-group-item"><span title="Flagged Nodes"><%= Node.where('flag > ?', 0).size%> nodes</span></li>
        <li class="list-group-item"><span title="Flagged Comments"><%= Comment.where('flag > ?', 0).size %> comments</span></li>
      </ul>
    </div>
  </div>
    <div class="card">
    <div class="card-body">
        <a class="card-title h5 text-secondary font-weight-bold" href="/spam2/filter/published/30"> <i class="fa fa-check text-success"></i>  Published</a>
        <ul class="list-group list-group-flush text-secondary mt-3">
          <li class="list-group-item"><span title="Published Nodes"><%= Node.where(status: 1).size%> nodes</span></li>
          <li class="list-group-item"><span title="Published Comments"><%= Comment.published.count %> comments</span></li>
        </ul>
    </div>
  </div>
</div>
<div class="card w-100 mt-2 border-0">
    <div class="card-body">
        <h4 class="card-title my-3 text-secondary font-weight-bold"> <i class="fa fa-line-chart text-primary"></i> Moderation graph</h4>
        <div id="timeline_spam" class="mt-5 w-100"></div>
    </div>
</div>
<div class="card-deck w-100 mt-5">
  <div class="card border-0">
   <div class="card-body">
    <h5 class="card-title  text-secondary font-weight-bold"> <i class="fa fa-tags text-primary"></i> Tags followed by moderators and admins</h5>
    <% if @popular_tags.present? %>
        <div id="moderator_tag"> </div>
    <% end %>
    </div>
  </div>
  <div class="card border-0">
    <div class="card-body">
        <% @moderator_tag.each do |tag|%>
            <a class="ml-3 my-2 btn btn-sm light border border-curve"><%= tag.first()%> <span class="badge badge-pill badge-info" data-toggle="tooltip" data-placement="top" title="Moderators and admins following this tag"><%= Tag.followers(tag.first()).where('rusers.role = ?', 'moderator').or(Tag.followers(tag.first()).where('rusers.role = ?', 'admin')).size %></span></a> 
        <%end%>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
  chart: {
    type: "line",
    height: 300,
    foreColor: "#999",
    scroller: {
      enabled: true,
      track: {
        height: 7,
        background: '#e0e0e0'
      },
      thumb: {
        height: 10,
        background: '#94E3FF'
      },
      scrollButtons: {
        enabled: true,
        size: 9,
        borderWidth: 2,
        borderColor: '#008FFB',
        fillColor: '#008FFB'
      },
      padding: {
        left: 30,
        right: 20
      }
    }
  }
  colors: ['#E8D020', '#E85C20', '#165F8B'],
  stroke: {
    curve: "smooth",
    width: 3
  },
  dataLabels: {
    enabled: false
  },
  series: [{
    name: 'Flagged Nodes',
    data: generateWeekWiseTimeSeries(0)
  }, {
    name: 'Spammed Nodes',
    data: generateWeekWiseTimeSeries(1)
  }, {
    name: 'Unmoderated  Nodes',
    data: generateWeekWiseTimeSeries(2)
  }],
  markers: {
    size: 0,
    strokeColor: "#fff",
    strokeWidth: 3,
    strokeOpacity: 1,
    fillOpacity: 1,
    hover: {
      size: 6
    }
 },
  xaxis: {
    type: "datetime",
    axisBorder: {
      show: false
    },
    axisTicks: {
      show: false
    }
  },
  yaxis: {
    tickAmount: 6,
    min: 0,
    opposite: true,
    labels: {
      offsetX: 24,
      offsetY: -5
    },
    tooltip: {
      enabled: true
    }
  },
  grid: {
    padding: {
      left: -5,
      right: 5
    }
  },
  tooltip: {
    x: {
      format: "dd MMM yyyy"
    },
  },
  legend: {
    position: 'top',
    horizontalAlign: 'left'
  }
};
var chart = new ApexCharts(document.querySelector("#timeline_spam"), options);
chart.render();

function generateWeekWiseTimeSeries(s) {
  var values = [
    <%= @graph_flagged.values if @graph_flagged.present? %>,
    <%= @graph_spammed.values if @graph_spammed.present? %>,
    <%= @graph_unmoderated.values if @graph_unmoderated.present? %>
  ];
  var i = 0;
  var months_dates = <%= @graph_spammed.keys if @graph_spammed.present? %>;
  var count = months_dates.length;
  var months = months_dates.map(x => new Date(x).getTime());
  var series = [];
  while (i < count) {
    for (var j = 0; j < months.length; j++) {
      series.push([months[j], values[s][i]]);
      i++;
    }
  }
  return series;
}
var values = <%=  @popular_tags.values if @popular_tags.present? %>;
var data = <%= raw (@popular_tags.keys) if @popular_tags.present? %>;
var page;
var options = {
  chart: {
    height: 500,
    type: 'bar',
    fontFamily: 'Junction Light',
    active: {
      allowMultipleDataPointsSelection: true,
    },
    events: {
      dataPointSelection: function (event, chartContext, config) {
        page = data[config.selectedDataPoints];
	parent.location = '/tag/' + page;
      }
    }
  },
  plotOptions: {
    bar: {
      horizontal: true,
    }
  },
  dataLabels: {
    enabled: false
  },
  series: [{
    name: 'Tag count',
    data: values
  }],
  xaxis: {
    categories: data
  }
};
var chart_tag = new ApexCharts(document.querySelector("#moderator_tag"), options);
chart_tag.render();
</script>
